import { Form, Modal, InputNumber, Spin, Radio } from 'antd';
import React, { useState } from 'react';

const MFEAParamsForm = props => {
  const { visible, onSuccess, onCancel, callback } = props;

  // States
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  // Handlers
  const handleSubmit = async () => {
    setLoading(true);
    setTimeout(() => {
      callback(form.getFieldValue());
      setLoading(false);
      onSuccess();
    }, 500);
  };

  const formItemLayout = {
    labelCol: {
      sm: { span: 24 },
      md: { span: 6 },
    },
    wrapperCol: {
      sm: { span: 24 },
      md: { span: 16 },
    },
  };
  // Renders
  return (
    <Modal
      maskClosable={false}
      visible={visible}
      title={'设置算法参数'}
      okText={'运行'}
      cancelText={'取消'}
      onOk={handleSubmit}
      onCancel={onCancel}
    >
      <Spin spinning={loading}>
        <Form
          {...formItemLayout}
          form={form}
          name={'post-review'}
          layout={'horizontal'}
          hideRequiredMark={true}
        >
          {/* <Form.Item
            name={'w'}
            label={'代价系数'}
            rules={[{ required: true, message: '代价系数为必填项' }]}
          >
            <InputNumber
              min={0}
              max={1}
              defaultValue={0.5}
              placeholder={'请输入'}
              style={{ width: '100%' }}
            />
          </Form.Item> */}
          <Form.Item
            name={'pop'}
            label={'种群大小'}
            rules={[{ required: true, message: '种群大小为必填项' }]}
          >
            <InputNumber
              min={10}
              defaultValue={50}
              placeholder={'请输入'}
              style={{ width: '100%' }}
            />
          </Form.Item>
          <Form.Item
            name={'gen'}
            label={'迭代次数'}
            rules={[{ required: true, message: '迭代次数为必填项' }]}
          >
            <InputNumber
              min={10}
              defaultValue={30}
              placeholder={'请输入'}
              style={{ width: '100%' }}
            />
          </Form.Item>
          <Form.Item
            name={'rmp'}
            label={'随机交叉概率'}
            rules={[{ required: true, message: '随机交叉概率为必填项' }]}
          >
            <InputNumber
              min={0}
              max={1}
              defaultValue={0.3}
              placeholder={'请输入'}
              style={{ width: '100%' }}
            />
          </Form.Item>

          <Form.Item
            name={'mutateProbability'}
            label={'个体变异概率'}
            rules={[{ required: true, message: '个体变异概率为必填项' }]}
          >
            <InputNumber
              min={0}
              max={1}
              defaultValue={0.3}
              placeholder={'请输入'}
              style={{ width: '100%' }}
            />
          </Form.Item>
          <Form.Item
            name={'useLocalSearchProbability'}
            label={'局部搜索概率'}
            rules={[{ required: true, message: '局部搜索概率为必填项' }]}
          >
            <InputNumber
              min={0}
              max={1}
              defaultValue={0.05}
              placeholder={'请输入'}
              style={{ width: '100%' }}
            />
          </Form.Item>
        </Form>
      </Spin>
    </Modal>
  );
};
export default MFEAParamsForm;
